
<script setup>
import { useStore } from "vuex";
import {ref,computed} from "vue";

const store = useStore();

console.log("vuex模块化：store",store);

const goods = computed(()=>store.state.goods1);

console.log("store.state.goods1",store.state.goods1);

const addGoods=()=>{
    store.commit({
        type:"goods1/addGoods",
        goods:{id:"01002",name:"华为手机",price:3000}
    })
}

</script>

<template>
    <h1>vuex的示例（模块化）：</h1>
    <ul>
        <li v-for="item in store.state.goods1.goods" :key="item.id">
            <p>编号：{{item.id}}</p>
            <p>名称：{{item.name}}</p>
            <p>价格：{{item.price}}</p>
        </li>
    </ul>
    <input type="button" value="添加一个商品" @click="addGoods">

</template>

<style lang="css" scoped></style>
